<template>
	<view class="vipContent">
		<zero-loading v-if="loading" type="love" :mask="true"></zero-loading>
		<navigationBar :backLastTwo='backFlag' :titleName="'会员充值'"></navigationBar>
		<u-notice-bar :volume-icon="false"  direction="column" :duration='payTipText.time' fontSize="22" :text="payTipText.text" bgColor='#ffffff' color='#717171'>
		</u-notice-bar>
		
		<view class="content ">
			<view class="contentBox  ">
				<view class="setBgfff  setborder ">
					<view class="setVerticalCenter setMarginTop">
						<u-icon name="level" color="#f3df94" size="55"></u-icon>
						<!-- @click="todetailPage()" -->
						<text  class="setWeight">会员充值</text>
					</view>
					<!-- 充值 -->
					<view class=" recharge">
						<view @click="changeType(item,index)" class="vipPrice" v-for="(item,index) in rechargeList" :key="index"
							:style="item.checked?'border: 3rpx solid #4fcc77;background-color: rgba(70, 185, 38, 0.1);':'background: linear-gradient(to top right, #fff8dc, #fde797);'">
							<!-- <text class="setFontColor1">{{item.termValidity}}会员</text> -->
							<view class="setFont" :style="item.checked?'color:#4fcc77':''">￥{{item.money/100}}</view>
							<view class="setFont setFontColor1 setMiniFont" v-if="item.days%7==0">{{item.days/7}}周
							</view>
							<view class=" setFontColor1 setMiniFont" v-else-if="item.days%31==0">{{item.days/31}}月
							</view>
							<view class=" setFontColor1 setMiniFont" v-else-if="item.days%365==0">{{item.days/365}}年
							</view>
							<view class=" setFontColor1 setMiniFont" v-else>{{item.days}}天</view>

							<text v-if="item.preMoney"
								class="setFontColor1 setMiniFont setTextThrough">￥{{item.preMoney/100}}</text>
							<view v-if="item.difference>0&&item.difference" class="reducetip" style="font-size: 18rpx;">
								立减{{item.difference/100}}元
							</view>
						</view>

					</view>
					<view class="sethorizontalbetween" style="padding: 0 20rpx;">
						<text>
							支付金额：￥{{paymentAmount/100}}
						</text>
						<view class="setVerticalCenter">
							会员时长：
							<view class="  setRedColor setWeight" v-if="day%7==0">{{day/7}}周</view>
							<view class="   setRedColor setWeight" v-else-if="day%31==0">{{day/31}}月</view>
							<view class="  setRedColor setWeight" v-else-if="day%365==0">{{day/365}}年</view>
							<view class="  setRedColor setWeight" v-else>{{day}}天</view>
						</view>
					</view>
				</view>

				<!-- 支付方式 -->
				<view class="setBgfff   setborder ">
					<view class="setVerticalCenter setMarginTop">
						<u-icon name="gift" color="#f3df94" size="55"></u-icon>
						<text class="setWeight">支付方式</text>
					</view>
					<view class="payWay ">
						<view @click="payWayType=1" class="setVerticalCenter way sethorizontalbetween setPadding"
							:style="payWayType==1?'background: linear-gradient(to top right, #f6f5f0, #fde797);border: 3rpx solid #f3de91;':''">
							<view class="setVerticalCenter ">
								<u-icon name="weixin-circle-fill" color="#4ade6c" size="55"></u-icon>
								<text class="setMiniFont textLeftmargin">微信支付</text>
							</view>
							<view v-if="payWayType==1" class="">
								<u-icon name="checkbox-mark" color="#4ade6c" size="30"></u-icon>
							</view>
						</view>
						<!-- #ifdef APP-PLUS -->

						<view @click="payWayType=2" class="setVerticalCenter way setMarginTop sethorizontalbetween setPadding"
							:style="payWayType==2?'background: linear-gradient(to top right, #f6f5f0, #fde797);border: 3rpx solid #f3de91;':''">
							<view class="setVerticalCenter">
								<u-icon name="zhifubao-circle-fill" color="#2979ff" size="55"></u-icon>
								<text class="setMiniFont textLeftmargin">支付宝</text>
							</view>
							<view v-if="payWayType==2" class="">
								<u-icon name="checkbox-mark" color="#2979ff" size="30"></u-icon>
							</view>
						</view>
						<!-- #endif -->
					</view>
					<u-line color="#eee" />
				</view>
				
				<view class="prisePay ">
					<view class="payDetail setDisplayCenter setRadius setVerticalCenter sethorizontalbetween">
						<view class="payMsg ">
							<view class="">
								<view class="setVerticalCenter " style="font-weight: 600;font-size: 35rpx;">
									合计：<text style="font-size: 35rpx;font-weight: 600;">￥{{paymentAmount/100}}</text>
								</view>
								<view v-if="currentPrice>0" class="setTextThrough">
									原价：￥{{currentPrice/100}}
								</view>
							</view>
						</view>
							
						<view class="setDisplayCenter">
							<!-- #ifdef MP-WEIXIN -->
							<u-button  @click="getrecharge()" :disabled="!openId&&!userPhone" shape="square">立即支付</u-button>
							<!-- 用户使用微信登录改账号未绑定微信 -->
							
							
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || H5-->
							<u-button @click="getrecharge2()" shape="square">立即支付</u-button>
							<!-- #endif -->
							
						</view>
					</view>
				</view>
			</view>
			<view class="setPadding setOnlyDisplay setLineHeight">
				<view class="setInline setMarginVertical setRightMargin">
					<u-icon color="red" name="info-circle"></u-icon>
				</view>才能招标会员为数字内容服务，购买后不支持退订、转让、退换，请斟酌确认
			</view>
			<view class="setPadding setOnlyDisplay setLineHeight">
				<view class="setInline setMarginVertical setRightMargin">
					<u-icon color="#4fcc77" name="phone"></u-icon>
				</view>
				<view class="setInline">
					尊敬的用户：如果您在充值的过程中遇到问题，请拨打才能招标热线：<text class="setcolor" @click="callPhone('400 0731 057')">400 0731 057</text>
				</view>
			</view>
		</view>
		<view class="setPadding">
			<view class="setVerticalCenter " style="margin-bottom: 30rpx;">
				<u-icon name="grid" color="#f3df94" size="55"></u-icon>
				<text class="setWeight">会员权益说明</text>
			</view>
			<view class="" style="padding: 0 20rpx;">
				<view style="margin:10rpx 0 40rpx 0;" class="setOnlyDisplay ">
					<view class="setNowrap1 setBigFont setRightMargin">
						<u-icon name="bag" color="#f3df94" size="55"></u-icon>
					</view>
					<view class="setNowrap2 setVertical">
						<text class="setWeight setcolor2 ">全国项目实时查询</text>
						<text class="setFontColor1 setFontColor2">实时查询全国招标、中标和中标企业等项目信息</text>
					</view>
				</view>
				<view style="margin:10rpx 0 40rpx 0;" class="setOnlyDisplay ">
					<view class="setNowrap1 setBigFont setRightMargin">
						<u-icon name="more-circle" color="#f3df94" size="55"></u-icon>
					</view>
					<view class="setNowrap2 setVertical">
						<text class="setWeight setcolor2">查询更多企业</text>
						<text class="setFontColor1 setFontColor2">普通用户每天可查询10家企业，会员用户每天可查询更多!</text>
					</view>
				</view>
				<view style="margin:10rpx 0 40rpx 0;" class="setOnlyDisplay ">
					<view class="setNowrap1 setBigFont setRightMargin">
						<u-icon name="phone" color="#f3df94" size="55"></u-icon>
					</view>
					<view class="setNowrap2 setVertical">
						<text class="setWeight setcolor2">获得企业详情</text>
						<text class="setFontColor1 setFontColor2">会员可查看企业的详情信息，企业联系电话、企业中标记录</text>
					</view>
				</view>
				 
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {

		data() {
			return {
				userPhone:null,
				// 判断出现按钮
				btnType:null,
				openId:null,
				backFlag:'',
				// 充值提示定时器
				timer: null,
				
				payTipText: {
					id: 0,
					text: ['才能招标欢迎您！'],
					time:2000
				},
				// 加载提示
				loading: false,
				//会员时长
				day: 0,
				// 订单号
				outTradeNo: null,
				// 当前原价
				currentPrice: 0,
				//当前支付金额
				paymentAmount: 0,
				// 当前选择的支付方式
				payWayType: 1,
				// 当前被选择的索引
				currentIndex: 0,
				// 当前充值规格
				rechargeList: [{
					// 原价
					originalPrice: 399,
					// 现价
					presentPrice: 199,
					// 期限
					termValidity: '1年',
					// 立减
					difference: '200',
					// 是否选中
					checked: true
				}, {
					// 原价
					originalPrice: 899,
					// 现价
					presentPrice: 399,
					// 期限
					termValidity: '2年',
					// 立减
					difference: '500',
					// 是否选中
					checked: false
				}, {
					// 原价
					originalPrice: 1199,
					// 现价
					presentPrice: 599,
					// 期限
					termValidity: '3年',
					// 立减
					difference: '600',
					// 是否选中
					checked: false
				}]

			}
		},
		onLoad(option) {
			if(option.last){
				this.backFlag='1'
			}
		},
		beforeMount() {
			this.getOpenId()
			this.actualAmount()
			this.getfindPayType()
			this.getpayNotice()
			
			
			
		},
		beforeDestroy() {
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loading = true
			setTimeout(() => {
				this.getfindPayType()
				uni.stopPullDownRefresh();
				this.loading = false
			}, 2000);
		},
		methods: {
			
			tobindPhone(){
				uni.navigateTo({
					url:'/pagesUser/bindMailbox?status=1&&page=2'
				})
			},
			
			
			// 获取用户 openId
			getOpenId(){
				let open = uni.getStorageSync('userInfo');
				if(open){
					this.openId = open.openid
					this.btnType=2
					
				}else{
					this.btnType=1
				}
					
				if(open.phone){
					this.userPhone=open.phone
					this.btnType=3
				}
					
				console.log("this.openId",this.openId,this.userPhone,this.btnType)
				
			},
			
			
			// 查询充值公告
			getpayNotice() {
				this.$app.request({
					url: this.$baseApp.api.pay.payNotice,
					method: 'post',
					dataType: 'json',
					success: res => {
						// console.log("这里是充值公告", res)
						if (res.data) {
								this.payTipText.text =res.data
							

						}

					},

					complete: res => {

					}
				});
			},

			// 拨打电话
			callPhone(phone) {

				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			//支付详情页
			todetailPage() {
				uni.reLaunch({
					url: '/pagesUser/rember/orderDetails'
				});
			},

			// 获取系统设置的所有支付规格
			getfindPayType() {
				this.loading = true
				this.$app.request({
					url: this.$baseApp.api.pay.findPayType,
					method: 'post',
					dataType: 'json',
					success: res => {
						// console.log("这里是支付", res)
						if (res.code == 200) {
							this.rechargeList = []
							res.data.forEach(item => {
								item.checked = false
								item.difference = item.preMoney - item.money
								this.rechargeList.push(item)
							})
							this.rechargeList[0].checked = true
							this.paymentAmount = this.rechargeList[0].money
							this.currentPrice = this.rechargeList[0].preMoney
							this.day = this.rechargeList[0].days
						} else {
							this.$refs.uToast.show({
								message: res.msg,
								type: 'success'
							})
						}

					},

					complete: res => {
						this.loading = false
					}
				});
			},
			toPay(orderObj) {

				let orderInfo = orderObj
				
				uni.requestPayment({
					"provider": "wxpay",
					appId: orderInfo.appId,
					timeStamp: orderInfo.timeStamp,
					nonceStr: orderInfo.nonceStr,
					package: orderInfo.packageValue,
					signType: orderInfo.signType,
					paySign: orderInfo.paySign,
					success: res => {
						
						// 跳转至订单详情页面
						uni.reLaunch({
							url: `/pagesUser/rember/orderDetails?outTradeNo=${this.outTradeNo}`
						});
					},
					fail: e => {
						
						this.$refs.uToast.show({
							message: '微信支付失败了',
							type: 'success'
						})
					}
				})
			},
			// 当前应支付金额
			actualAmount() {
				this.rechargeList.forEach((item, index) => {
					if (item.checked) {
						this.paymentAmount = item.money
						this.currentPrice = item.preMoney
						this.day = item.days
						this.currentIndex = index

					}
				})


			},

			changeType(item, index) {
				this.rechargeList.forEach((res) => {
					res.checked = false
				})
				item.checked = true
				this.actualAmount(item)
				// 支付

			},
			// 支付
			getrecharge() {
				let type = this.rechargeList[this.currentIndex]._id
				
				let param = {
					rechargeKey: type,
					openId: this.openId
				}
				
				this.$app.request({
					url: this.$baseApp.api.pay.rechargeWxApp,
					method: 'POST',
					data: param,
					dataType: 'json',
					success: res => {
						
						if (res.code == 200) {
							this.toPay(res.data.orderObj)
							this.outTradeNo = res.data.outTradeNo
						} else {
							this.$refs.uToast.show({
								message: res.msg,
								type: 'success'
							})
						}

					},
					complete: res => {

					}
				});
			},
			getrecharge2() {
				
				let type = this.rechargeList[this.currentIndex]._id
				let param = {
					rechargeKey: type,
					type: this.payWayType
				}
				
				this.$app.request({
					url: this.$baseApp.api.pay.recharge,
					method: 'POST',
					data: param,
					dataType: 'json',
					success: res => {
						if (res.code == 200) {
						
							if (this.payWayType == 1) {
								this.outTradeNo = res.data.outTradeNo
								delete res.data.outTradeNo
								let orderInfo = res.data
								this.appPay(orderInfo)
								
							} else if (this.payWayType == 2) {
								this.appPay(res.data.orderObj)
								this.outTradeNo = res.data.outTradeNo


							}


						} else {
							this.$refs.uToast.show({
								message: res.msg,
								type: 'success'
							})
						}

					},
					complete: res => {

					}
				});
			},
			// app 微信或支付宝支付
			appPay(orderInfo) {
				
				let way = "wxpay"
				if (this.payWayType == 1) {
					way = "wxpay"
				} else {
					way = "alipay"
				}
				uni.requestPayment({
					provider: way,
					orderInfo: orderInfo, //微信、支付宝订单数据
					success: res => {
						


						uni.reLaunch({
							url: `/pagesUser/rember/orderDetails?outTradeNo=${this.outTradeNo}`
						});
					},
					fail: function(err) {
						// console.log("这=========", err)

					}
				});
			}



		}

	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.setborder {
		border-top: 10rpx solid #eee;
		
		box-sizing: border-box;
	}

	.vipContent {


		.content {


			.contentBox {


				.prisePay {


					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 130rpx;

					.payDetail {
						width: 90%;

						height: 120rpx;

						background-color: #4fcc77;

						color: #fff;
						padding: 5rpx 20rpx;

						.payMsg {}
					}
				}

				.payWay {
					padding: 20rpx;

					.way {
					
						border-radius: 10rpx;

						.textLeftmargin {
							margin-left: 8rpx;
						}
					}
				}

				.recharge {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					padding: 20rpx;

					.vipPrice {
						margin: 11rpx;
						border: 1rpx solid #e3dfeb;
						padding: 20rpx 0;
						border-radius: 10rpx;
						align-items: center;
						display: flex;
						flex-direction: column;
						width: 29%;
						box-sizing: border-box;

						.reducetip {
							background-color: #47464a;
							color: #fff;
							padding: 3rpx 15rpx;
							border-radius: 10rpx;
							font-size: 16rpx;
						}
					}
				}
			}

			.card {
				width: 100%;
				box-sizing: border-box;
				position: absolute;

				top: 0;
				left: 0;


				transform: translate(0, -100%);
				height: 150rpx;
				display: flex;
				justify-content: center;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
				}

				.remberMsg {
					background: linear-gradient(to top right, #fde797, #4fcc77);


					height: 100%;

					padding: 0 40rpx 40rpx;
					width: 100%;
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.msg {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						position: absolute;
						bottom: 6%;
						left: 0;
						
					}

				}
			}
		}
	}
</style>
